<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/element-ui.js"></script>
    <link rel="stylesheet" href="css/element-ui.css">
</head>

<body>
    <div id="div">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="user">
                <el-input type="text" v-model="ruleForm.uesr" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input type="email" v-model="ruleForm.email" autocomplete="off"></el-input>

            </el-form-item>
            <el-form-item label="电话号" prop="phone">
                <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        new Vue({
            el: "#div",
            data: {

                ruleForm: {
                    user: '',
                    pass: '',
                    email: '',
                    phone: ''
                },

                rules: {
                    user: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { pattern: /^[a-z0-9_-]{3,16}$/, message: 'a-z0-9 6-18位', trigger: 'blur' },
                    ],
                    pass: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { pattern: "^[a-z0-9_-]{6,18}$", message: 'a-z0-9 6-18位', trigger: 'blur' },
                    ],
                    // checkPass: [
                    //     { validator: validatePass2, trigger: 'blur' },
                    //  ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { pattern: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/, message: '邮箱标准格式', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '请输入电话号', trigger: 'blur' },
                        { pattern: /^\d{3}-\d{8}|\d{4}-\d{7}$/, message: '匹配形式如 0511-4405222 或 021-87888822', trigger: 'blur' },
                    ]

                }

            },

            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        });







    </script>
</body>

</html>